<!DOCTYPE html>
<html ng-app="demoApp">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多级树选择组件 - ng-components-ui</title>
    <link rel="stylesheet" href="../dist/ng-components.css" />
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        margin: 0;
        padding: 0;
        background: #f5f5f5;
      }

      .header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px 40px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .header h1 {
        margin: 0 0 10px 0;
        font-size: 32px;
      }

      .header p {
        margin: 0;
        opacity: 0.9;
        font-size: 16px;
      }

      .back-link {
        display: inline-block;
        margin-top: 15px;
        color: white;
        text-decoration: none;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        transition: background 0.2s;
      }

      .back-link:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px;
      }

      .demo-section {
        background: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 30px;
      }

      .demo-section h2 {
        margin: 0 0 20px 0;
        color: #333;
        font-size: 20px;
        border-bottom: 2px solid #667eea;
        padding-bottom: 10px;
      }

      .demo-section h3 {
        margin: 20px 0 15px 0;
        color: #555;
        font-size: 16px;
        font-weight: 600;
      }

      .demo-section p {
        color: #666;
        line-height: 1.6;
        margin: 0 0 15px 0;
      }

      .debug-output {
        background: #2d3748;
        color: #e2e8f0;
        padding: 20px;
        border-radius: 6px;
        margin-top: 20px;
        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
        font-size: 13px;
      }

      .debug-output strong {
        color: #90cdf4;
        display: block;
        margin-bottom: 10px;
      }

      .debug-output pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
      }

      .tree-demo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 30px;
        margin-top: 20px;
      }

      .tree-demo-item {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        padding: 20px;
        background: #fafafa;
      }

      .tree-demo-item h3 {
        margin: 0 0 15px 0;
        color: #667eea;
        font-size: 15px;
      }

      .tree-container {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 15px;
        max-height: 400px;
        overflow-y: auto;
      }

      .code-block {
        background: #f7fafc;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        padding: 15px;
        margin: 10px 0;
        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
        font-size: 12px;
        overflow-x: auto;
      }

      .code-block code {
        color: #2d3748;
      }

      .feature-list {
        background: #f7fafc;
        border-left: 4px solid #667eea;
        padding: 15px 20px;
        margin: 20px 0;
      }

      .feature-list ul {
        margin: 0;
        padding-left: 20px;
      }

      .feature-list li {
        color: #4a5568;
        margin: 8px 0;
        line-height: 1.6;
      }
    </style>
  </head>
  <body ng-controller="DemoController">
    <div class="header">
      <h1>多级树选择组件</h1>
      <p>支持无限层级的树形结构选择</p>
      <a href="home.html" class="back-link">← 返回主页</a>
    </div>

    <div class="container">
      <div class="demo-section">
        <h2>多级树选择组件</h2>

        <div class="feature-list">
          <strong>功能特性:</strong>
          <ul>
            <li>支持无限层级的树形结构</li>
            <li>单选/多选模式</li>
            <li>级联选择（选中父节点自动选中所有子节点）</li>
            <li>父节点简化模式（选中所有子节点时只返回父节点ID）</li>
            <li>半选状态显示</li>
            <li>自定义ID和标签字段</li>
            <li>流畅的展开/折叠动画</li>
          </ul>
        </div>

        <div class="tree-demo-grid">
          <!-- Demo 1: 基本多选 + 级联 + 搜索 -->
          <div class="tree-demo-item">
            <h3>1. 基本多选 + 级联 + 搜索</h3>
            <p>选中父节点会自动选中所有子节点，支持搜索功能</p>
            <div class="tree-container">
              <multi-level-tree
                tree-data="treeData1"
                id="BpaId"
                label="cnName"
                cascade="true"
                multiple="true"
                searchable="true"
                search-placeholder="搜索节点..."
                ng-model="selectedIds1_1"
              >
              </multi-level-tree>
            </div>
            <div class="debug-output">
              <strong>选中的节点:</strong>
              <pre>{{ selectedIds1_1 | json }}</pre>
            </div>
          </div>

          <!-- Demo 2: 单选模式 -->
          <div class="tree-demo-item">
            <h3>2. 单选模式</h3>
            <p>每次只能选中一个节点</p>
            <div class="tree-container">
              <multi-level-tree
                tree-data="treeData1"
                id="BpaId"
                label="cnName"
                cascade="false"
                multiple="false"
                ng-model="selectedIds1_2"
              >
              </multi-level-tree>
            </div>
            <div class="debug-output">
              <strong>选中的节点:</strong>
              <pre>{{ selectedIds1_2 | json }}</pre>
            </div>
          </div>

          <!-- Demo 3: 多选但不级联 -->
          <div class="tree-demo-item">
            <h3>3. 多选但不级联</h3>
            <p>可以多选，但选中父节点不会影响子节点</p>
            <div class="tree-container">
              <multi-level-tree
                tree-data="treeData1"
                id="BpaId"
                label="cnName"
                cascade="false"
                multiple="true"
                ng-model="selectedIds1_3"
              >
              </multi-level-tree>
            </div>
            <div class="debug-output">
              <strong>选中的节点:</strong>
              <pre>{{ selectedIds1_3 | json }}</pre>
            </div>
          </div>

          <!-- Demo 4: 复杂组织架构 -->
          <div class="tree-demo-item">
            <h3>4. 复杂组织架构</h3>
            <p>实际业务场景中的多层级组织结构</p>
            <div class="tree-container">
              <multi-level-tree
                tree-data="treeData2"
                id="BpaId"
                label="cnName"
                cascade="true"
                multiple="true"
                ng-model="selectedIds1_4"
              >
              </multi-level-tree>
            </div>
            <div class="debug-output">
              <strong>选中的节点:</strong>
              <pre>{{ selectedIds1_4 | json }}</pre>
            </div>
          </div>

          <!-- Demo 5: 父节点简化模式 -->
          <div class="tree-demo-item">
            <h3>5. 父节点简化模式</h3>
            <p>选中所有子节点时只返回父节点ID（初始值示例）</p>
            <div class="tree-container">
              <multi-level-tree
                tree-data="treeData2"
                id="BpaId"
                label="cnName"
                cascade="true"
                multiple="true"
                cascade-return-parent-only="true"
                ng-model="selectedIds1_5"
              >
              </multi-level-tree>
            </div>
            <div class="debug-output">
              <strong>选中的节点 (简化后):</strong>
              <pre>{{ selectedIds1_5 | json }}</pre>
            </div>
          </div>

          <!-- Demo 6: 自定义字段 -->
          <div class="tree-demo-item">
            <h3>6. 自定义ID和标签字段</h3>
            <p>使用自定义的字段名称</p>
            <div class="tree-container">
              <multi-level-tree
                tree-data="treeData3"
                id="id"
                label="name"
                cascade="true"
                multiple="true"
                ng-model="selectedIds1_6"
              >
              </multi-level-tree>
            </div>
            <div class="debug-output">
              <strong>选中的节点:</strong>
              <pre>{{ selectedIds1_6 | json }}</pre>
            </div>
          </div>

          <!-- Demo 7: 大型树结构 -->
          <div class="tree-demo-item" style="grid-column: 1 / -1;">
            <h3>7. 大型树结构性能测试 (带搜索功能)</h3>
            <p style="color: #e53e3e; font-weight: 600;">
              包含 <strong>{{ treeData4Stats.totalNodes }}</strong> 个节点，4层深度
              ({{ treeData4Stats.level1 }} 个一级部门 × {{ treeData4Stats.level2 }} 个中心 × {{ treeData4Stats.level3 }} 个团队 × {{ treeData4Stats.level4 }} 个员工)
            </p>
            <div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px; margin: 15px 0; border-radius: 4px;">
              <strong style="color: #856404;">性能测试说明:</strong>
              <ul style="margin: 8px 0 0 0; padding-left: 20px; color: #856404;">
                <li>测试树组件在大数据量下的渲染性能</li>
                <li>测试级联选择的性能（选中一级节点将选中所有子节点）</li>
                <li>测试展开/折叠的流畅度</li>
                <li>测试父节点简化功能的处理速度</li>
                <li><strong style="color: #d32f2f;">测试搜索功能（输入"张三"、"研发"、"团队"等关键词试试）</strong></li>
              </ul>
            </div>
            <div class="tree-container" style="max-height: 600px;">
              <multi-level-tree
                tree-data="treeData4"
                id="BpaId"
                label="cnName"
                cascade="true"
                multiple="true"
                cascade-return-parent-only="true"
                searchable="true"
                search-placeholder="搜索节点（尝试输入：张三、研发、团队）..."
                ng-model="selectedIds1_7"
              >
              </multi-level-tree>
            </div>
            <div class="debug-output">
              <strong>选中的节点 (简化后):</strong>
              <pre>{{ selectedIds1_7 | json }}</pre>
              <div style="margin-top: 15px; padding: 10px; background: #1e293b; border-radius: 4px;">
                <strong style="color: #38bdf8;">实时统计:</strong><br>
                <span style="color: #a5f3fc;">选中节点数量: {{ selectedIds1_7.length }}</span><br>
                <span style="color: #a5f3fc;">树节点总数: {{ treeData4Stats.totalNodes }}</span><br>
                <span style="color: #a5f3fc;">选中率: {{ (selectedIds1_7.length / treeData4Stats.totalNodes * 100).toFixed(2) }}%</span>
              </div>
              <div style="margin-top: 10px; padding: 10px; background: #065f46; border-radius: 4px; color: #d1fae5;">
                <strong>操作建议:</strong><br>
                1. 尝试选中一个一级部门，观察级联选择性能<br>
                2. 观察父节点简化功能：选中所有子节点后，返回值只包含父节点ID<br>
                3. 逐层展开节点，测试大量DOM的渲染性能<br>
                4. 快速切换选中状态，测试响应速度
              </div>
            </div>
          </div>
        </div>

        <div class="code-block" style="margin-top: 30px;">
          <code>
// HTML 使用方式<br>
&lt;multi-level-tree<br>
&nbsp;&nbsp;tree-data="treeData"<br>
&nbsp;&nbsp;id="BpaId"<br>
&nbsp;&nbsp;label="cnName"<br>
&nbsp;&nbsp;cascade="true"<br>
&nbsp;&nbsp;multiple="true"<br>
&nbsp;&nbsp;cascade-return-parent-only="false"<br>
&nbsp;&nbsp;ng-model="selectedIds"&gt;<br>
&lt;/multi-level-tree&gt;<br>
<br>
// Controller 中的数据结构<br>
$scope.treeData = [<br>
&nbsp;&nbsp;{<br>
&nbsp;&nbsp;&nbsp;&nbsp;BpaId: "1",<br>
&nbsp;&nbsp;&nbsp;&nbsp;cnName: "一级节点",<br>
&nbsp;&nbsp;&nbsp;&nbsp;children: [<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BpaId: "1-1",<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cnName: "二级节点",<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;children: []<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
&nbsp;&nbsp;&nbsp;&nbsp;]<br>
&nbsp;&nbsp;}<br>
];<br>
<br>
$scope.selectedIds = []; // 双向绑定的选中ID数组
          </code>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/angular@1.8.3/angular.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/angular-strap@2.3.12/dist/angular-strap.min.js"></script>
    <script src="../dist/ng-components.js"></script>
    <script>
      angular
        .module("demoApp", ["ngComponents"])
        .controller("DemoController", function ($scope) {
          // Tree Demo Data 1
          $scope.treeData1 = [
            {
              BpaId: "1",
              cnName: "一级节点1",
              children: [
                {
                  BpaId: "1-1",
                  cnName: "二级节点1-1",
                  children: [
                    {
                      BpaId: "1-1-1",
                      cnName: "三级节点1-1-1",
                      children: []
                    }
                  ]
                },
                {
                  BpaId: "1-2",
                  cnName: "二级节点1-2",
                  children: []
                }
              ]
            },
            {
              BpaId: "2",
              cnName: "一级节点2",
              children: [
                {
                  BpaId: "2-1",
                  cnName: "二级节点2-1",
                  children: []
                }
              ]
            }
          ];

          // Tree Demo Data 2 - Complex Organization
          $scope.treeData2 = [
            {
              BpaId: "D1",
              cnName: "董事会",
              children: [
                {
                  BpaId: "D1-1",
                  cnName: "战略委员会",
                  children: [
                    { BpaId: "D1-1-A", cnName: "战略规划组", children: [] },
                    { BpaId: "D1-1-B", cnName: "投资决策组", children: [] }
                  ]
                },
                {
                  BpaId: "D1-2",
                  cnName: "审计委员会",
                  children: [
                    { BpaId: "D1-2-A", cnName: "内部审计组", children: [] },
                    { BpaId: "D1-2-B", cnName: "风险控制组", children: [] }
                  ]
                }
              ]
            },
            {
              BpaId: "M1",
              cnName: "管理层",
              children: [
                {
                  BpaId: "M1-1",
                  cnName: "技术部",
                  children: [
                    {
                      BpaId: "M1-1-A",
                      cnName: "研发团队",
                      children: [
                        { BpaId: "M1-1-A-1", cnName: "前端组", children: [] },
                        { BpaId: "M1-1-A-2", cnName: "后端组", children: [] },
                        { BpaId: "M1-1-A-3", cnName: "测试组", children: [] }
                      ]
                    },
                    { BpaId: "M1-1-B", cnName: "运维团队", children: [] }
                  ]
                },
                {
                  BpaId: "M1-2",
                  cnName: "市场部",
                  children: [
                    { BpaId: "M1-2-A", cnName: "营销团队", children: [] },
                    { BpaId: "M1-2-B", cnName: "品牌团队", children: [] }
                  ]
                },
                {
                  BpaId: "M1-3",
                  cnName: "人力资源部",
                  children: [
                    { BpaId: "M1-3-A", cnName: "招聘组", children: [] },
                    { BpaId: "M1-3-B", cnName: "培训组", children: [] }
                  ]
                }
              ]
            },
            {
              BpaId: "T1",
              cnName: "技术支持",
              children: [
                { BpaId: "T1-1", cnName: "客服团队", children: [] },
                { BpaId: "T1-2", cnName: "技术支持团队", children: [] }
              ]
            }
          ];

          // Tree Demo Data 3 - Custom Fields
          $scope.treeData3 = [
            {
              id: "dept-1",
              name: "销售部门",
              children: [
                {
                  id: "dept-1-1",
                  name: "华东区",
                  children: [
                    { id: "dept-1-1-1", name: "上海", children: [] },
                    { id: "dept-1-1-2", name: "杭州", children: [] }
                  ]
                },
                {
                  id: "dept-1-2",
                  name: "华北区",
                  children: [
                    { id: "dept-1-2-1", name: "北京", children: [] },
                    { id: "dept-1-2-2", name: "天津", children: [] }
                  ]
                }
              ]
            },
            {
              id: "dept-2",
              name: "生产部门",
              children: [
                { id: "dept-2-1", name: "一车间", children: [] },
                { id: "dept-2-2", name: "二车间", children: [] }
              ]
            }
          ];

          // Tree Demo Data 4 - Large Tree (模拟大型组织架构)
          function generateLargeTree() {
            var largeTree = [];

            // 生成6个一级部门
            for (var i = 1; i <= 6; i++) {
              var dept = {
                BpaId: "DEPT-" + i,
                cnName: "集团第" + i + "事业部",
                children: []
              };

              // 每个一级部门下有5个二级部门
              for (var j = 1; j <= 5; j++) {
                var subDept = {
                  BpaId: "DEPT-" + i + "-" + j,
                  cnName: "第" + i + "事业部-" + ["研发中心", "市场中心", "运营中心", "财务中心", "人力中心"][j-1],
                  children: []
                };

                // 每个二级部门下有4个三级部门
                for (var k = 1; k <= 4; k++) {
                  var team = {
                    BpaId: "DEPT-" + i + "-" + j + "-" + k,
                    cnName: "团队" + k + "组",
                    children: []
                  };

                  // 每个三级部门下有6个员工
                  for (var m = 1; m <= 6; m++) {
                    team.children.push({
                      BpaId: "DEPT-" + i + "-" + j + "-" + k + "-" + m,
                      cnName: "员工" + m + " (" + ["张三", "李四", "王五", "赵六", "钱七", "孙八"][m-1] + ")",
                      children: []
                    });
                  }

                  subDept.children.push(team);
                }

                dept.children.push(subDept);
              }

              largeTree.push(dept);
            }

            return largeTree;
          }

          $scope.treeData4 = generateLargeTree();

          // 计算树的统计信息
          $scope.treeData4Stats = {
            level1: 6,
            level2: 5,
            level3: 4,
            level4: 6,
            totalNodes: 6 * (1 + 5 * (1 + 4 * (1 + 6)))
          };

          console.log("生成大型树数据:", $scope.treeData4.length, "个一级节点，总节点数:", $scope.treeData4Stats.totalNodes);

          // Initialize selected IDs for multi-level-tree
          $scope.selectedIds1_1 = [];
          $scope.selectedIds1_2 = [];
          $scope.selectedIds1_3 = [];
          $scope.selectedIds1_4 = [];
          $scope.selectedIds1_5 = ["D1", "M1", "T1"]; // 初始值示例
          $scope.selectedIds1_6 = [];
          $scope.selectedIds1_7 = []; // 大型树

          console.log("DemoController initialized");
        });
    </script>
  </body>
</html>
